<template>
  <el-dialog
    title="删除政策"
    v-model="dialogVisible"
    width="330px"
    @close="handleClose"
    align-center
    center
    :append-to-body="true"
    :close-on-click-modal="false"
    class="customer-dialog">
    <div class="dialog-content">
      <div class="hint">
        警告：删除政策，会导致全网该等级伙伴折扣、收益账单等计算方面的严重问题，请谨慎操作！
      </div>

      <div class="code-box">
        <p class="title">{{ `输入手机号为 ${userStore.user.mobile} 的验证码` }}</p>
        <div class="code-content">
          <el-input
            v-model="smsCode"
            placeholder="请输入" />
          <el-button
            type="primary"
            plain
            @click="getCode">
            获取验证码
          </el-button>
        </div>
      </div>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button
          type="primary"
          :disabled="disabled"
          @click="confirmFn">
          {{ confirmText }}
        </el-button>
        <el-button @click="cancelFn">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
  import { ElMessage } from 'element-plus';
  import { sendUpdateVerifyCode, removePolicySetting } from '@/api/index';

  import { useUserStore } from '@/stores/user';
  const userStore = useUserStore();

  const props = defineProps({
    show: {
      type: Boolean,
      required: true
    },
    id: {
      type: Number,
      required: true
    }
  });

  const emit = defineEmits(['update:show', 'updateList']);

  const dialogVisible = computed({
    get() {
      return props.show;
    },
    set() {
      emit('update:show', false);
    }
  });

  let smsCode = ref('');
  let confirmText = ref('确认删除（10秒倒计时）');
  let times = ref(10);
  let disabled = ref(true);

  // 倒计时
  function countDownFn() {
    let t = setInterval(() => {
      if (times.value <= 1) {
        clearInterval(t);
        disabled.value = false;
        confirmText.value = '确认删除';
      } else {
        times.value--;
        confirmText.value = `确认删除（${times.value}秒倒计时）`;
      }
    }, 1000);
  }

  function getCode() {
    sendUpdateVerifyCode({
      mobile: userStore.user.mobile
    }).then(res => {
      ElMessage.success('验证码已发送');
    });
  }

  // 关闭
  function handleClose() {
    emit('update:show', false);
  }

  // 确认
  function confirmFn() {
    if (!smsCode.value) {
      ElMessage.error('请输入验证码');
      return;
    }

    removePolicySetting({
      id: props.id,
      smsCode: smsCode.value
    }).then(res => {
      ElMessage.success('已删除');
      emit('updateList');
      handleClose();
    });
  }

  // 取消
  function cancelFn() {
    emit('update:show', false);
  }

  onMounted(() => {
    countDownFn();
  });
</script>

<style lang="scss" scoped>
  .dialog-content {
    .hint {
      margin-bottom: 20px;
      line-height: 22px;
      color: #f56c6c;
      font-size: 16px;
      font-weight: bold;
    }

    .code-box {
      .title {
        margin-bottom: 10px;
        font-size: 16px;
      }

      .code-content {
        display: flex;

        .el-input {
          width: 200px;
          margin-right: 10px;
        }
      }
    }
  }
</style>
